<template>
  <div
    class="_property-row-label"
    :style="{background: colorConfigMap[propertyItem.state!], border: 'none'}"
  >
    <img
      v-if="propertyItem.state !== 'UNMODIFIED' && propertyItem.accept"
      src="statics/icons/projectMerge/accept.svg"
      style="height: 16px; margin-right: 4px"
    />
    <img
      v-else-if="typeof propertyItem.accept === 'boolean' && propertyItem.state !== 'UNMODIFIED' && !propertyItem.accept"
      src="statics/icons/projectMerge/reject.svg"
      style="height: 16px; margin-right: 4px"
    />
    <img
      v-if="propertyItem.icon"
      :src="propertyItem.icon"
      style="height: 16px; margin-right: 4px"
    />
    <span
      class="_property-row-text"
      :title="spanValue"
    >
      <HTMLViewer
        v-if="spanValue.startsWith('<')"
        :htmlText="spanValue"
        :projectId="getProjectId()"
        @click.prevent
      />
      <span v-else>{{ $t(spanValue) }}</span>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { PropertyValue } from "../config";
import HTMLViewer from "@/modules/model/comps/common/HTMLViewer.vue";
const props = defineProps<{
  propertyItem: PropertyValue;
}>();
const spanValue = computed(() => {
  const value = typeof props.propertyItem.modelName === "string" ? props.propertyItem.modelName : props.propertyItem.value + "";
  return value;
});
const colorConfigMap = {
  ADD: "#CFE5AB",
  DELETE: "#FCD3D8",
  MODIFIED: "#C5E2FD"
};

function getProjectId() {
  return props.propertyItem.from; //  app.activeProject?.id || '';
}
</script>

<style lang="scss" scoped>
._property-row {
  &-label {
    display: flex;
    border: 1px solid #c4c1c2;
  }
  &-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
